import { Table, Button, Popconfirm } from 'antd'
import { useEffect, useState } from 'react'
// import { connect } from 'react-redux'
// import actions from '@/store/taskOa/actions'
import { useSelector, useDispatch } from 'react-redux'
import { getAllTaskListAsync, removeTask, updateTask } from '@/store/taskOa/toolKit/features/taskSlice'

const Footer = () => {
	const Columns = [
		{
			title: '任务ID',
			dataIndex: 'id',
			key: 'id',
		},
		{
			title: '任务描述',
			dataIndex: 'task',
			key: 'task',
		},
		{
			title: '任务状态',
			dataIndex: 'state',
			key: 'state',
		},
		{
			title: '任务时间',
			dataIndex: 'time',
			key: 'time',
		},
		{
			title: '任务完成时间',
			dataIndex: 'complete',
			key: 'complete',
		},
		{
			title: "操作",
			key: "action",
			render: (_, record) => (
				<div style={{ display: "flex", gap: "8px" }}>
					<Popconfirm
						title="删除任务"
						description="确定要删除这个任务吗？"
						okText="确定"
						cancelText="取消"
						onConfirm={() => handleDelete(record)}
					>
						<Button type="primary" size="small" danger>
							删除
						</Button>
					</Popconfirm>
					<Button type="primary" size="small" onClick={() => handleComplete(record)}>
						完成
					</Button>
				</div>
			),
		},
	]
	const [loading, setLoading] = useState(false)
	const taskList = useSelector(state => state.task.taskList)
	const dispatch = useDispatch()
	const handleDelete = (record) => {
		dispatch(removeTask(record.id))
	}
	const handleComplete = (record) => {
		dispatch(updateTask(record.id))
	}
	useEffect(() => {
		if (!taskList) {
			setLoading(true)
			dispatch(getAllTaskListAsync()).then(() => {
				setLoading(false)
			})
		}
	}, [])

	return (
		<div>
			<Table loading={loading} dataSource={taskList} columns={Columns} rowKey={(record) => record.id}></Table>
		</div>
	)
}

export default Footer